import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../views/index.vue'
// 嵌套页面的两个子路由
import qiantaoa from '../views/qiantao/qiantaoa'
import qiantaob from '../views/qiantao/qiantaob'


Vue.use(VueRouter)

// 实现路由

const router = new VueRouter({
  // abstract,history,hash 这三个，hash是访问，网址路由有#号，history没有井号
  mode: "history",
  // 滚动行为 他是写在路由里面的
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 200 }
  },

  routes: [
    // 重定向到index
    {
      path: '/',
      name: 'index',
      component: index,
      redirect: "/index",
    },
    //  正常路由页面
    {
      path: '/index',
      name: 'index',
      component: index,
    },
    {
      path: '/index1',
      name: 'index1',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/index1.vue'),

    },
    {
      path: '/index2',
      name: 'index2',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      //其实这个就是懒加载，点击这个路由才加载，不点击不加载，优点不会卡死，若是不用懒加载所有页面一次加载，那么页面会卡死
      component: () => import(/* webpackChunkName: "about" */ '../views/index2.vue')
    },
    {
      path: '/index3',
      name: 'index3',
      component: () => import(/* webpackChunkName: "about" */ '../views/index3.vue')
    },
    {
      path: '/index4',
      name: 'index4',
      component: () => import(/* webpackChunkName: "about" */ '../views/index4.vue')
    },
    {
      path: '/index5',
      name: 'index5',
      component: () => import(/* webpackChunkName: "about" */ '../views/index5.vue')
    },
    {
      path: '/index6',
      name: 'index6',
      component: () => import(/* webpackChunkName: "about" */ '../views/index6.vue')
    },
    // 登陆
    // {
    //   path: '/login',
    //   name: 'login',
    //   component: () => import(/* webpackChunkName: "about" */ '../views/login/login.vue')
    // },
    // 插槽
    {
      path: '/chacao',
      name: 'chacao',
      component: () => import(/* webpackChunkName: "about" */ '../views/chacao.vue')
    },
    // 组件边界
    {
      path: '/bianjie',
      name: 'bianjie',
      component: () => import(/* webpackChunkName: "about" */ '../views/bianjie.vue')
    },
    // 自定义组件
    {
      path: '/jubu',
      name: 'jubu',
      component: () => import(/* webpackChunkName: "about" */ '../views/jubu.vue')
    },
    // jsx跟realg框架一样
    {
      path: '/jsx',
      name: 'jsx',
      component: () => import(/* webpackChunkName: "about" */ '../views/jsx.vue')
    },
    // guolv 过滤器
    {
      path: '/guolv',
      name: 'guolv',
      component: () => import(/* webpackChunkName: "about" */ '../views/guolv.vue')
    },
    // axios 请求
    {
      path: '/axios',
      name: 'axios',
      component: () => import(/* webpackChunkName: "about" */ '../views/axios.vue')
    },
    // axios 统一封装网络请求
    {
      path: '/axios2',
      name: 'axios2',
      component: () => import(/* webpackChunkName: "about" */ '../views/axios2.vue')
    },
    // swiper 
    {
      path: '/swiper',
      name: 'swiper',
      component: () => import(/* webpackChunkName: "about" */ '../views/swiper.vue')
    },

    //  动态路由 多个参数:namerouter:age
    {
      path: '/routerpage/namerouter/:namerouter/age/:age',
      name: 'routerpage',
      component: () => import(/* webpackChunkName: "about" */ '../views/routerpage.vue')
    },
    // 访问页面不存在404 
    {
      path: '*',
      name: 'error404',
      component: () => import(/* webpackChunkName: "about" */ '../views/error404.vue')
    },
    // 命名路由 其实就是加个name 
    {
      path: '/nameRouter',
      name: 'nameRouter',
      component: () => import(/* webpackChunkName: "about" */ '../views/nameRouter.vue')
    },
    // push进入路由 
    {
      path: '/pushrouter',
      name: 'pushrouter',
      component: () => import(/* webpackChunkName: "about" */ '../views/pushrouter.vue')
    },
    // qiantaorouter 嵌套路由,注意这里只是添加了子路由但是还需要在qiantaorouter 里面写router-view显示,redirect:"/qiantaorouter/qiantaoa",重定向
    {
      path: '/qiantaorouter',
      name: 'qiantaorouter',
      component: () => import(/* webpackChunkName: "about" */ '../views/qiantaorouter.vue'),
      redirect: "/qiantaorouter/qiantaoa",
      children: [
        {
          // 嵌套路由不需要加/ 斜杠
          path: 'qiantaoa',
          name: 'qiantaoa',
          component: qiantaoa,
        },
        {
          // 嵌套路由不需要加/ 斜杠
          path: 'qiantaob',
          name: 'qiantaob',
          component: qiantaob,
        },

      ]
    },
    // zujianchuancan. 组件传参 看地址栏变化  agers
    //   path: '/routerpage/namerouter/:namerouter/age/:age',
    {
      // path: '/zujianchuancan/namerouterr/:namerouter/ager/:age',
      path: '/zujianchuancan/narouterr/:narouterr/agers/:agers',
      name: 'zujianchuancan',
      component: () => import(/* webpackChunkName: "about" */ '../views/zujianchuancan.vue'),
      props: true
    },
    // zujianrouter 组件内的路由守卫
    {
      path: '/zujianrouter',
      name: 'zujianrouter',
      component: () => import(/* webpackChunkName: "about" */ '../views/zujianrouter.vue'),
    },
    // metarouter meta使用
    {
      path: '/metarouter',
      name: 'metarouter',
      component: () => import(/* webpackChunkName: "about" */ '../views/metarouter.vue'),
      meta: { islogin: true }
    },
    // denglu 登陆页面
    {
      path: '/denglu',
      name: 'denglu',
      component: () => import(/* webpackChunkName: "about" */ '../views/denglu.vue'),

    },
    // scrollpage 滚动行为
    {
      path: '/scrollpage',
      name: 'scrollpage',
      component: () => import(/* webpackChunkName: "about" */ '../views/scrollpage.vue'),
    },
    // axioskuayu axios跨域
    {
      path: '/axioskuayu',
      name: 'axioskuayu',
      component: () => import(/* webpackChunkName: "about" */ '../views/axioskuayu.vue'),
    },
    // wenti 本项目的问题
    {
      path: '/wenti',
      name: 'wenti',
      component: () => import(/* webpackChunkName: "about" */ '../views/wenti.vue'),
    },
    // login mock登陆造接口模拟登陆
    {
      path: '/login',
      name: 'login',
      component: () => import(/* webpackChunkName: "about" */ '../views/login.vue'),
    },
      // eventBus EventBus 又称为事件总线。
      {
        path: '/eventBus',
        name: 'eventBus',
        component: () => import(/* webpackChunkName: "about" */ '../views/eventBus.vue'),
      },
      // yiqingpage  疫情页面使用天行数据
      {
        path: '/yiqingpage',
        name: 'yiqingpage',
        component: () => import(/* webpackChunkName: "about" */ '../views/yiqingpage.vue'),
      },
  



  ]
})


//这里是全局执行的钩子函数 导航守卫，路由的生命周期,to,from,指从哪页面到哪页面，next就是一定要添加,不添加则不跳转

router.beforeEach((to, from, next) => {

  console.log(from, to);
  // to是到哪个页面，逻辑比如就是当你点击到我的订单页面，我判断我的订单页面meta是不是true，是则进入，不是则跳转到登陆页面
  // 需要用户登陆判断是否登陆
  // meta.islogin是上面的meta页面，需要登录之后才能进入。
  if (to.meta.islogin) {
    //  做一些事情，比如这里是跳转到指定页面
    // 再做一个判断。是否有tooken，tooken是true，代表允许登陆
    // var token = false;
    // 现在是模拟后台token已经生成,这里读取token
    var token = localStorage.getItem("token")
    if (token) {
      next();
    } else {
      // 则跳转到首页登陆,注意里面是{}
      next({ path: "/login" });
    }
  } else {
    next()
    // console.log("允许进入其他页面");
  }
})


export default router;